<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周生生官网</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/万能.css">
    <link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <div class="left"></div>
        <div class="center">
            <div class="">
                <h1><img src="./img/logo-nav.png" alt=""></h1>
                <ul>
                    <li>重点推介</li>
                    <li>珠宝</li>
                    <li>品牌系列</li>
                    <li>婚嫁</li>
                    <li>礼品</li>
                    <li>MINTYGREEN</li>
                    <li>劳力士</li>
                    <li>帝陀表</li>
                    <li>周生生之友</li>
                    <li>服务</li>                   
                </ul>
            </div>
        </div>
        <div class="right">
            <span>登录</span>/
            <span>注册</span>
        </div>
    </nav>
    <div class="nav1"></div>
    <div class="banner">
        <img src="./img/banner_cultural_blessingT_1450_p2.webp" alt="">
    </div>
    <div class="xi">
        <img src="./img/banner_chineseGiftingCollection_logo.webp" alt="">
    </div>
    <div class="xixi">
        <img src="./img/banner_chineseWeddingCollection_1450_v2.jpg" alt="">
    </div>
    <div class="li">
        <img src="./img/banner_Gifts-ByCollect-ChineseGifting_logo.webp" alt="">
    </div>
    <div class="xixi">
        <img src="./img/banner_Gifts-ByCollect-ChineseGifting_1450.jpg" alt="">
    </div>
    <div class="guo">
        <img src="./img/banner_GoldRush_logo.webp" alt="">
    </div>
    <div class="xixi">
        <img src="./img/banner_GoldRush_1450.jpg" alt="">
    </div>
    <div class="happy">
        <img src="./img/banner_HP_logo.webp" alt="">
    </div>
    <div class="happy2">
        <img src="./img/banner_HP_1450.webp" alt="">
    </div>
    <div class="tongxin">
        <p>童心开始，同心永结</p>
        <h4>永结同心的秘方，是每天每日的逗趣相处永保甜蜜的秘方，是二人限定的童真少女心</h4>
    </div>
    <div class="tongxin2">
        <img src="./img/banner_wes_wedding_1450.webp" alt="">
    </div>
    <div class="jiezhi">
        <div>
            <img src="./img/category_1_1.webp" alt="" class="top">
            <img src="./img/category_1450_logo_1_1.webp" alt="" class="xia">
            <p>Infini Love Diamond的璀璨，源于对质素、品味的追求，不放过任何一点光芒</p>
        </div>
        <div>
            <img src="./img/category_1_2.webp" alt="" class="top">
            <img src="./img/category_1450_logo_1_3.webp" alt="" class="xia">
            <p>专属定制戒指服务，按您所想，自由创作、组合出您的动人故事</p>
        </div>
        <div>
            <img src="./img/category_1_3.jpg" alt="" class="top">
            <img src="./img/category_1450_logo_1_3.webp" alt="" class="xia">
            <p> 提供一对一全方位专业咨询立即预约体验专属定制</p>
        </div>
        <div>
            <img src="./img/category_1_4.webp" alt="" class="top">
            <img src="./img/category_1450_logo_1_4.webp" alt="" class="xia">
            <p>由零开始创作求婚钻戒，自由选择钻石的品质和戒指设计，定制成可以捧在手心的爱情信物</p>
        </div>
    </div>
    <div class="yinyangshi">
        <img src="./img/banner_ipyys_1450.jpg" alt="">
    </div>
    <div class="xihuan">
        <span class="span1">您可能喜欢</span><br>
        <span class="span2">探索高级珠宝饰品，为您的魅力加分</span>
    </div>
    <!-- 轮播图 -->
    <div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/EPCM92097KGN_f46c292e-4403-4d5c-8a20-14163d53e345_350.jpg" alt="">
                    <span>Let's Play「好玩」</span>
                    <span>18K 黄金单耳环配饰</span>
                    <span>$650</span>
                </div>
                <div class="swiper-slide">
                    <img src="./img/EPCM92643GDK_8d3a4730-b776-4e6a-9e17-b94e94cddd70_350.jpg" alt="">
                    <p></p>
                    <span>足金手镯</span>
                    <span>$5473</span>
                </div>
                <div class="swiper-slide">
                    <img src="./img/EPCM92653GDP_15f9b5ab-0c61-471b-8e42-e7de2ef43a38_350.jpg" alt="">
                    <span>Let's Play「好玩」</span>
                    <span>18K 黄金单耳环配饰</span>
                    <span>$14366</span>
                </div>
                <div class="swiper-slide">
                    <img src="./img/EPCM91930GDK_3e8a1a8a-82ba-4b82-84f9-013d806489a4_350.jpg" alt="">
                    <span>Let's Play「好玩」</span>
                    <span>18K 黄金单耳环配饰</span>
                    <span>$3050</span>
                </div>
                <div class="swiper-slide">
                    <img src="./img/EPCM91820GDC_caecef17-d46d-4c2c-8775-d238404d084b_350.jpg" alt="">
                    <span>Let's Play「好玩」</span>
                    <span>18K 黄金单耳环配饰</span>
                    <span>$2750</span>
                </div>
                <div class="swiper-slide">
                    <img src="./img/EPCM91204GDK_3ce9ea23-f993-4c46-a649-75a92e3cab1b_350.jpg" alt="">
                    <span>Let's Play「好玩」</span>
                    <span>18K 黄金单耳环配饰</span>
                    <span>$8041</span>
                </div>  
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
    
        </div>
    </div>
    <div class="leibie">
        <span>按类别浏览</span><br>
        <span class="span3">匠心独运的首饰，为您提供最优质精致的产品</span>
    </div>
    <div class="leibie2">
        <img src="./img/category_768_2_1.webp" alt="">
        <img src="./img/category_768_2_2.webp" alt="">
        <img src="./img/category_768_2_3.webp" alt="">
        <img src="./img/category_768_2_4.webp" alt="">
    </div>
    <div class="fenleiming">
        <span>吊坠</span>
        <span>戒指</span>
        <span>耳环</span>
        <span>手链</span>
    </div>
    <div class="dibu">
        <div class="box">
            <div class="smallbox">
                <ul>
                    <li>联系我们</li>
                    <li>分店位置</li>
                    <li>网站地图</li>
                    <li>周生生集团</li>
                    <li>愿景及品牌理念</li>
                    <li>历史传承与里程碑</li>
                    <li>珠宝品质与工艺</li>
                    <li>加入我们</li>
                    <li>周生生贵金属化验所</li>
                </ul>
                <ul>
                    <li>服务</li>
                    <li>货品配送</li>
                    <li>退货及换货</li>
                    <li>帮助</li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li class="smalltu">
                        <img src="./img/icon_fb.png" alt="">
                        <img src="./img/icon_weibo.png" alt="">
                        <img src="./img/icon_ig.png" alt="">
                    </li>
                    <li>顾客服务：（+86）400</li>
                    <li>830 1878</li>
                </ul>
                <ul>
                    <li>付款方式</li>
                    <li class="zhifu">
                        <img src="./img/hp_icon_wechat.png" alt="">
                        <img src="./img/hp_icon_alipay.png" alt="">
                    </li>
                </ul>
                <ul>
                    <li>学生优惠</li>
                    
                </ul>
            </div>
            <div class="dihang">
                <h6 class="yinsi"><span class="span1">©  2022周生生集团国际有限公司</span></h6>
                <h6 class="yinsi">
                    <span>隐私政策</span>
                    <span>Cookie政策</span>
                    <span>条款及细则</span>
                    <span>粤ICP备12061196号</span>
                    <span><img src="./img/footer_icon.png" alt="" style="width: 15px;height: 15px;"> 粤公网安备44010602008010号</span>           
                </h6>
            </div>
        </div>
    </div>
    <div class="zixun">
        <img src="./img/icon11.png" alt=""><span>咨询</span>
    </div>
</body>
</html>
<script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/ajax.js"></script>
<script>
    var mySwiper = new Swiper('.swiper', {

        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        breakpoints: {
            320: {  //当屏幕宽度大于等于320
                slidesPerView: 2,
                spaceBetween: 10
            },
            768: {  //当屏幕宽度大于等于768 
                slidesPerView: 3,
                spaceBetween: 20
            },
            1280: {  //当屏幕宽度大于等于1280
                slidesPerView: 4,
                spaceBetween: 30
            }
        }
    })        
</script>